<template>
  <div class="flap-card-wrapper" v-show="flapCardVisible">
    <div class="flap-card-bg" :class="{'animation': runFlapCardAnimation}" v-show="runFlapCardAnimation">
      <div class="flap-card" v-for="(item, index) in flapCardList"
      :key="index"
      :style="{zIndex:item.zIndex}">
        <!-- 包含了五个圆进行翻转 -->
        <div class="flap-card-circle">
          <div class="flap-card-semi-circle
          flap-card-semi-circle-left" :style="semiCircleStyle(item, 'left')" ref="left"></div>
          <div class="flap-card-semi-circle
          flap-card-semi-circle-right" :style="semiCircleStyle(item, 'right')" ref="right"></div>
        </div>
      </div>
        <!-- 烟花 -->
      <div class="point-wrapper">
        <div class="point" :class="{'animation':runPointAnimation}" v-for="item in pointList" :key="item"></div>
      </div>
    </div>
    <div class="book-card"
        :class="{'animation': runBookCardAnimation}"
        v-show="runBookCardAnimation">
      <div class="book-card-wrapper">
        <div class="img-wrapper">
          <img class="img" :src="data ? data.cover : ''">
        </div>
        <div class="content-wrapper">
          <div class="content-title">{{data ? data.title : ''}}</div>
          <div class="content-author sub-title-medium">{{data ? data.author : ''}}</div>
          <div class="content-category">{{categoryText()}}</div>
        </div>
        <div class="read-btn" @click.stop="showBookDetail(data)">{{$t('home.readNow')}}</div>
      </div>
    </div>
    <div class="close-btn-wrapper" @click="close">
      <div class="icon-close"></div>
    </div>
  </div>
</template>

<script>
  import { storeHomeMixin } from '../../utils/mixin'
  import { flapCardList, categoryText } from '../../utils/store'
  export default {
    mixins: [storeHomeMixin],
    // 接受获取的推荐书籍参数从storeHome中获得，获取写为this.data
    props: {
      data: Object
    },
    data() {
      return {
        flapCardList,
        front: 0,
        back: 1,
        intervalTime: 25,
        runFlapCardAnimation: false,
        pointList: null,
        runPointAnimation: false,
        runBookCardAnimation: false
      }
    },
    watch: {
      // 监听flapcardVisible这个属性
      flapCardVisible(v) {
        if (v) {
          this.runAnimation()
        }
      }
    },
    methods: {
      close() {
        this.setFlapCardVisible(false)
        this.stopAnimation()
      },
      // 样式方法
      semiCircleStyle(item, dir) {
        return {
          backgroundColor: `rgb(${item.r}, ${item.g}, ${item.b})`,
          backgroundSize: item.backgroundSize,
          backgroundImage: dir === 'left' ? item.imgLeft : item.imgRight
        }
      },
      // 转动方法,第几个圆的那一半转动
      rotate(index, type) {
        const item = this.flapCardList[index]
        let dom
        if (type === 'front') {
          dom = this.$refs.right[index]
        } else {
          dom = this.$refs.left[index]
        }
        // 做dom转动
        dom.style.transform = `rotateY(${item.rotateDegree}deg)`
        dom.style.backgroundColor = `rgb(${item.r}, ${item._g}, ${item.b})`
      },
      // 实际翻转图片  最初上面右侧的半圆和下面左侧的半圆是一个重叠；转动时上面往外转，下面往内转；一起转动到90度后，下面的index值大于上面的，显示下面的半月
      flapCardRotate() {
        // 正面的图片
        const frontFlapCard = this.flapCardList[this.front]
        // 背面的图片
        const backFlapCard = this.flapCardList[this.back]
        frontFlapCard.rotateDegree += 10
        // 背景颜色加深
        frontFlapCard._g -= 5
        backFlapCard.rotateDegree -= 10
        // 背景颜色变浅
        if (backFlapCard.rotateDegree < 90) {
          backFlapCard._g += 5
        }
        if (frontFlapCard.rotateDegree === 90 && backFlapCard.rotateDegree === 90) {
          // 到达第一个临界点
          backFlapCard.zIndex += 2
        }
        // 右面图片
        this.rotate(this.front, 'front')
        // 左面图片
        this.rotate(this.back, 'back')
        if (frontFlapCard.rotateDegree === 180 && backFlapCard.rotateDegree === 0) {
          this.next()
        }
      },
      // 切换下一组
      next () {
        // 正面的图片
        const frontFlapCard = this.flapCardList[this.front]
        // 背面的图片
        const backFlapCard = this.flapCardList[this.back]
        // 正面归位
        frontFlapCard.rotateDegree = 0
        // 背面归位
        backFlapCard.rotateDegree = 0
        frontFlapCard._g = frontFlapCard.g
        backFlapCard._g = backFlapCard.g
        this.rotate(this.front, 'front')
        this.rotate(this.back, 'back')
        // 以上全部都还原了
        this.front++
        this.back++
        const len = this.flapCardList.length
        if (this.front >= len) {
          this.front = 0
        }
        if (this.back >= len) {
          this.back = 0
        }
        // 动态设置zIndex,依次加1 ，当超过100时候回到96
        // 100 -> 96
        // 99 -> 100
        // 98 -> 99
        // 97 -> 98
        // 96 -> 97
        // (0-1+5)%5=4
        // (1-1+5)%5=0
        this.flapCardList.forEach((item, index) => {
          item.zIndex = 100 - ((index - this.front + len) % len)
        })
        // 归为后要做准备工作
        this.prepare()
      },
      // 让背面的卡片左边半圆和右边半圆的卡片重叠
      prepare() {
         const backFlapCard = this.flapCardList[this.back]
         // 实现和右侧半圆进行重叠
         backFlapCard.rotateDegree = 180
         backFlapCard._g = backFlapCard.g - 5 * 9
         this.rotate(this.back, 'back')
      },
      // 重置翻转样式
      reset() {
        this.front = 0
        this.back = 1
        this.flapCardList.forEach((item, index) => {
          item.zIndex = 100 - index
          item._g = item.g
          item.rotateDegree = 0
          this.rotate(index, 'front')
          this.rotate(index, 'back ')
        })
        this.runBookCardAnimation = false
        this.runFlapCardAnimation = false
        this.runPointAnimation = false
      },
      // 创建开始翻转卡片的动画
      startFlapCardAnimation() {
        // 将前面和后面的卡片重叠
        this.prepare()
        // 定时任务，不停的跑
        this.task = setInterval(() => {
          this.flapCardRotate()
        }, this.intervalTime)
      },
      startPointAnimation() {
        this.runPointAnimation = true
        setTimeout(() => {
          this.runPointAnimation = false
        }, 750)
      },
      // 停止翻转卡片
      stopAnimation() {
        if (this.task) {
          clearInterval(this.task)
        }
         if (this.timeout) {
          clearTimeout(this.timeout)
        }
        if (this.timeout2) {
          clearTimeout(this.timeout2)
        }
        this.reset()
      },
      // 动画完成后书籍显示
      runAnimation() {
        this.runFlapCardAnimation = true
        // this.startFlapCardAnimation()
        this.timeout = setTimeout(() => {
          this.startFlapCardAnimation()
          this.startPointAnimation()
        }, 300)
        this.timeout2 = setTimeout(() => {
          this.stopAnimation()
          this.runBookCardAnimation = true
        }, 2500)
      },
      // 显示推荐书籍
      categoryText() {
        // category那篇的id
        // console.log(this.data)
        if (this.data) {
          return categoryText(this.data.category, this)
        } else {
          return ''
        }
      }
   },
  created() {
    // dom在创建时，创建小球。每个小球取得key:point${i}
    this.pointList = []
    for (let i = 0; i < 18; i++) {
      // 每个小球的name， point${i}
      this.pointList.push(`point${i}`)
    }
  }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
  @import "../../assets/styles/flapCard";
  .flap-card-wrapper {
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    @include center;
    @include absCenter;
    .flap-card-bg {
      position: relative;
      height: px2rem(128);// 64
      width: px2rem(128);// 64
      border-radius: px2rem(10);// 5
      background: white;
      // transform: scale(0);
      // opacity: 0;
      // 烟花动画。在这里调用keyframes动画
      &.animation {
        animation: flap-card-move .3s ease-in both;
      }
      @keyframes flap-card-move {
        //最初状态 scale变为原来的几倍 infinite无限循环
        0% {
          transition: scale(0);
          opacity: 0;
        }
        50% {
          transition: scale(1.2);
          opacity: 1;
        }
        75% {
          transition: scale(.9);
          opacity: 1;
        }
        100% {
          transition: scale(1);
          opacity: 1;
        }
      }
      .flap-card {
        width: px2rem(96);// 48
        height: px2rem(96);// 48
        @include absCenter;
        .flap-card-circle{
          display: flex;
          width: 100%;
          height: 100%;
          .flap-card-semi-circle {
            flex: 0 0 50%;
            width: 50%;
            height: 100%;
            background: orange;
            background-repeat: no-repeat;
            backface-visibility: hidden;// 转动到背面(左面)的显示状态隐藏
          }
          .flap-card-semi-circle-left {
            border-radius: px2rem(48) 0 0 px2rem(48);// 24 24
            background-position: center right;
            transform-origin: right;// 转动轴沿着右侧
          }
          .flap-card-semi-circle-right {
            border-radius: 0 px2rem(48) px2rem(48) 0;// 24 24
            background-position: center left;
            transform-origin: left;// 转动轴沿着左侧
          }
        }
      }
      .point-wrapper {
        z-index: 1500;
        @include absCenter;
        .point {
          border-radius: 50%;
          @include absCenter;
          &.animation {
            // css循环
            @for $i from 1 to length($moves) {
              &:nth-child(#{$i}) {
                @include move($i)
              }
            }
          }
        }
      }
    }
    .book-card {
      position: relative;
      width: 65%;
      max-width: px2rem(800);//400
      box-sizing: border-box;
      border-radius: px2rem(30);// 15
      background: white;
      &.animation {
        animation: scale .3s ease-in both;
        @keyframes scale {
          0% {
            transform: scale(0);
            opacity: 0;
          }
          100% {
            transform: scale(1);
            opacity: 1;
          }
        }
      }
      .book-card-wrapper {
        width: 100%;
        height: 100%;
        margin-bottom: px2rem(60);// 30
        @include columnTop;
        .img-wrapper {
          width: 100%;
          margin-top: px2rem(40);//20
          @include center;
          .img {
            width: px2rem(180);//90
            height: px2rem(260);// 130
          }
        }
        .content-wrapper {
          padding: 0 px2rem(40);//40
          margin-top: px2rem(40);//20
          .content-title {
            color: #333;
            font-weight: bold;
            font-size: px2rem(36);//
            line-height: px2rem(40);//
            max-height: px2rem(80);//
            text-align: center;
            @include ellipsis2(2)
          }
          .content-author {
            margin-top: px2rem(20);//
            text-align: center;
          }
          .content-category {
            color: #999;
            font-size: px2rem(28);//
            margin-top: px2rem(20);//
            text-align: center;
          }
        }
        .read-btn {
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 1100;
          width: 100%;
          border-radius: 0 0 px2rem(30) px2rem(30);//
          padding: px2rem(30) 0;//15
          text-align: center;
          color: white;
          font-size: px2rem(28);//
          background: $color-blue;
        }
      }
    }
    .close-btn-wrapper {
      position: absolute;
      left: 0;
      bottom: px2rem(60);// 30
      z-index: 1100;
      width: 100%;
      @include center;
      .icon-close {
        width: px2rem(90);// 45
        height: px2rem(90);// 45
        border-radius: 50%;
        background: #333;
        font-size: px2rem(50);//25
        color: white;
        @include center;
      }
    }
  }
</style>
